<form method="post" id="frmAngkatan" action="<?= base_url() ?>alumni/adduser" enctype="multipart/form-data">
    <div class="modal-body">
        <div class="span5">
            <div class="row">
                <div class="span2">CSV File</div>
                <input type="file" name="txtAlumni" class="span1" id="txtAlumni" />
            </div>
        </div>
    </div>
    <div style="clear: both;"></div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-primary submit" value="Simpan"/>
        <a href="#" class="btn btn-inverse" onclick="batal()">Batal</a>
    </div>
</form>
<script>
    $("#frmAngkatan input[type=submit]").attr("disabled", "disabled");
    function batal(){
        $('#free').modal('hide');
    }
    $(".modal").css({
        'width' : '500',
        'margin-top':($(window).height()-$(".modal").height())/2, 
        'top':'0',
        'margin-left':($(window).width()-500)/2, 
        'left' : '0'
    }) ;
    $(':file').change(function(){
        var file = this.files[0];
        name = file.name;
        size = file.size;
        type = file.type;
        if(type == 'text/csv' || type == 'application/vnd.ms-excel'){
            $("#frmAngkatan input[type=submit]").removeAttr("disabled");  
        }else{
            $("#frmAngkatan input[type=submit]").attr("disabled", "disabled");
        }
    });
    $("#frmAngkatan").submit(function(event) {
        event.preventDefault();
        var formData = new FormData($(this)[0]);
        $.ajax({
            url: $("#frmAngkatan").attr("action"),  //server script to process data
            type: 'POST',
            /*xhr: function() {  // custom xhr
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){ // check if upload property exists
                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
                }
                return myXhr;
            },*/
            //Ajax events
            //beforeSend: beforeSendHandler,
            success: completeHandler,
            error: errorHandler,
            // Form data
            data: formData,
            //Options to tell JQuery not to process data or worry about content-type
            cache: false,
            contentType: false,
            processData: false
        });
    });
    function completeHandler(data){
        //console.log(data.total,'|',data.error,'|',data.success,'|',data.noerror);
        var msg = 'Total = '+data.total+' \n success = '+data.success+' \n error = '+data.error;
        /*for(var val in data.noerror){
            msg = msg + val + "; "
        }*/
        Object.keys(data.noerror).forEach(function(key){
            msg = msg + ' \n error data nomer = ' + data.noerror[key] + ": " + data.reason[key] + "; ";
        });
        alert(msg);
        batal();
    }
    function errorHandler(){
        alert("Format data salah");
    }
//    function progressHandlingFunction(e){
//        if(e.lengthComputable){
//            $('progress').attr({value:e.loaded,max:e.total});
//        }
//    }
                
</script>